import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text,Input } from '@tarojs/components'
import '../../assets/common.scss'
import CommonJs from '../../utils/common'
import Hearder from './hearder'
import './join.scss'

export default class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
			paytype:125,
			byfrom:'',
			monery:'',
			zftype:0,
			paypwd:[],
			jmtype:"",
			isshowkhf:'',
      paypwdlen:0,
      code:'',
      tuitable:[{number:'1',tuibg:false,innerhtml:false,click:'1'},
                {number:'2',tuibg:false,innerhtml:false,click:'1'},
                {number:'3',tuibg:false,innerhtml:false,click:'1'},
                {number:'4',tuibg:false,innerhtml:false,click:'1'},
                {number:'5',tuibg:false,innerhtml:false,click:'1'},
                {number:'6',tuibg:false,innerhtml:false,click:'1'},
                {number:'7',tuibg:false,innerhtml:false,click:'1'},
                {number:'8',tuibg:false,innerhtml:false,click:'1'},
                {number:'9',tuibg:false,innerhtml:false,click:'1'},
                {number:'-',tuibg:true,innerhtml:false,click:'3'},
                {number:'0',tuibg:false,innerhtml:false,click:'1'},
                {number:'',tuibg:true,innerhtml:true,click:'2'}
              ],
    }
  }
  config = {
    navigationBarTitleText:'支付'
  }
  open(url,type){
    CommonJs.openTo(url)
  }
  componentWillMount () {
		var params=this.$router.params;
		console.log(JSON.stringify(params));
		var _this=this;
		Taro.login({
      success(res) {
	      _this.setState({
			    byfrom:params.byfrom,
				monery:params.monery,
				jmtype:params.jmtype,
			    code:res.code
			  })
	   	}
	  })
  }
  componentDidShow () {

  }
  choosepay(val){
		this.setState({
			paytype:val
		})
  }
  closepay(){
    this.setState({
      zftype:0
    })
  }
  inputNum(type,event){
    var _this = this
    var paypwd = this.state.paypwd
    if (type == 1) {
      var paypwdlen = paypwd.length
      if (paypwdlen < 6) {
        var num = event.target.dataset.number
        paypwd.push(num)
        var paypwdlen = paypwd.length
        this.setState({
          paypwd:paypwd,
          paypwdlen:paypwdlen
        },function(){
          if (paypwdlen == 6) {
            _this.pay()
          }
        })
      }
    } 
    else if (type == 2) {
      paypwd.pop()
      var paypwdlen = paypwd.length
      this.setState({
        paypwd:paypwd,
        paypwdlen:paypwdlen
      })
    }
   
  }
  sure(){
  	var type=this.state.paytype;
  	if(type==10){
  		this.setState({
	      zftype:1
	    })
  	}
  	else{
  		this.pay();
  	}
  }
  showkhf(){
	var byfrom=this.state.byfrom;
	if(byfrom=='bdjoin'){
		Taro.showToast({
		  title: "绑定成功，跳转中。。。",
		  icon: "none",
		  duration: 1000,
		});
		setTimeout(function(){
			 CommonJs.open('/pages/my/my');
		},1000)
	}
	else{
		this.setState({
				isshowkhf:1,
				paypwd:[],
			 paypwdlen:0,
				zftype:0
		});
	}
  }
  back(){
	  var byfrom=this.state.byfrom;
  	if(byfrom=='join'||byfrom=='jmjoin'){
		 CommonJs.open('/pages/xijia/grouplist');
  	}
  }
  closetc(){
	this.setState({
		isshowkhf:0
	});
}
  pay(){
  	var byfrom=this.state.byfrom;
  	
  	var paytypes=this.state.paytype
  	//10-现金账号支付，113-支付宝app支付，123-微信app支付，125-小程序支付
  	var payPasswords = this.state.paypwd
    var payPassword = payPasswords.join('')
  	var dates={
			payAmount:this.state.monery,
			payPassword:payPassword,
			payTypeId:paytypes,
			code :this.state.code 
		}
	if(byfrom=='join'){
		//开户费
		var url='/bond/payWaysDepositBouns'
	}
	if(byfrom=='jmjoin'){
		//加盟升级开户费
		var url='/bond/payWaysDepositBouns'
		dates.gradeSettingId = this.state.jmtype
	}
	var method='GET'
	var pram='noloading'
	if(byfrom=='bdjoin'){
		//易庄绑定区域
		var url='/order/bapi/v1.9/regio-relate-order/createAndPayment'
		var region=Taro.getStorageSync('region')
			
		dates.regionId=region.id;
		dates.totalAmount=this.state.monery*100
		dates.payAmount=this.state.monery*100
		dates.passWord=payPassword
		method='POST'
		pram='wfw'
	}
	
  	var _this=this;
  	Taro.showLoading({title: '支付中',mask: true})
    CommonJs.ajaxRequest(url,dates,method,function(ret){
	    if (paytypes == 125) {
		  var res=ret.content;
		  if(pram=='wfw'){
			res=ret.data
		  }
		 
	      var timeStamp = res.timeStamp
	      var nonceStr = res.nonceStr
	      var packageValue = res.packageValue
	      var signType =res.signType
	      var paySign =res.paySign
	      Taro.requestPayment({
	      	appId:res.appId,
	        timeStamp:timeStamp,
	        nonceStr: nonceStr,
	        package: packageValue,
	        signType: signType,
	        paySign: paySign,
	        success(res) {
	         	Taro.showToast({
	            title:'支付成功',
	            icon: 'success',
	            duration: 1500,
	            mask: true
	          })
	          setTimeout(() => { _this.showkhf() }, 1500)
	        },
	        fail() {
	          Taro.showToast({
	            title:'支付失败',
	            icon: 'none',
	            duration: 2000
	          })
	        }
	      })
	    } else if (paytypes == 10) {
	    	Taro.hideLoading()
			 setTimeout(() => { _this.showkhf() }, 1500)
	        
	      
	    } 
    },pram)
  }
 
  render () {
    return (
      <View className='page'>
      	<View className='paytype'>
					<View className='tit'>选择支付方式</View>
					<View className='qun-bmgue'  onClick={this.choosepay.bind(this,125)}>
					  <View classNme='qun-zifans'>
						<View className='qun-zifuli'>
						  <View className='qun-fasi'>
							<Image mode="scaleToFill" className='qun-fsimg' src="https://minichat.g2ma.com/kedouimg/icon26.png"></Image>
							<View className='qun-wexm'>
							  <Text>微信支付</Text>
							</View>
						  </View>
						  <Image className='qun-bmbgtu'  src={this.state.paytype==125?'https://minichat.g2ma.com/kedouimg/icon24.png':'https://minichat.g2ma.com/kedouimg/icon23.png'}></Image>
						</View>
					  </View>
					</View>
					<View className='qun-bmgue'  onClick={this.choosepay.bind(this,10)}>
					  <View classNme='qun-zifans'>
						<View className='qun-zifuli'>
						  <View className='qun-fasi'>
							<Image mode="scaleToFill" className='qun-fsimg' src="https://minichat.g2ma.com/kedouimg/icon28.png"></Image>
							<View className='qun-wexm'>
							  <Text>资金账号支付</Text>
							</View>
						  </View>
						  <Image className='qun-bmbgtu'  src={this.state.paytype==10?'https://minichat.g2ma.com/kedouimg/icon24.png':'https://minichat.g2ma.com/kedouimg/icon23.png'}></Image>
						</View>
					  </View>
					</View>
				</View>
				<View className='shop-btn'>
            <Button className='shopbtn'  onClick={this.sure.bind(this)}>确认支付 {this.state.monery}元</Button>
        </View>

		<View className='ptc' style={this.state.isshowkhf?'':'display:none'}>
        	<View className='ptc-con'>
        		<View className='ptc-tit'>加盟成功</View>
        		<View className='ptc-main'>
					<View className='ptc-text'>请截屏保存后,扫码二维码下载app</View>
					<Image mode="scaleToFill" className='app-ewm' src='https://xjzbsmall.g2ma.com/kedouimg/xTvG.png'></Image>
				</View>
        		<View className='ptc-btn'>
        			<View className='btn-sure' onClick={this.back.bind(this)}>确定</View>
        		</View>
        	</View>
				</View>


        <View className='qun-zffixed' style={this.state.zftype == 1 ? 'display:block;' : 'display:none;'}>
          <View className='qun-zfbotn'>
            <View className='section'>
              <View className='qun-zftite'>
                <Image className='qun-zfclose' onClick={this.closepay.bind(this)} src="https://minichat.g2ma.com/kedouimg/close1.png"></Image>
                <Text>请输入支付密码</Text>
                <Text></Text>
              </View>
              <View className='qun-zfmima'>
                <View className='qun-zfkuan'>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 1 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 2 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 3 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 4 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 5 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 6 ? '●' : ''} type='text' disabled='true'/>
                </View>
              </View>
              <View className='qun-zfwanji' style="display:none;"><Text onClick={this.open.bind(this,'../my/pwdset')}>忘记密码?</Text></View>
              <View className='tui-table-view'>
                {tuitable.map((item, index) => (
                  <View className={item.tuibg ? 'tui-col-3 tui-bg' : 'tui-col-3'} dataNumber={item.number} onClick={this.inputNum.bind(this,item.click)}>
                  {item.innerhtml ?
                    <Image className='qun-zfdel' src='https://minichat.g2ma.com/kedouimg/del.png'></Image>
                    :
                    item.number
                  }
                  </View>
                ))}
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
